import { createRouter, createWebHistory } from 'vue-router';

// 引入页面和布局组件
const HomePage = () => import('./pages/HomePage.vue');
const AddDiaryPage = () => import('./pages/AddDiaryPage.vue');
const EditDiaryPage = () => import('./pages/EditDiaryPage.vue');
const LoginPage = () => import('./pages/LoginPage.vue');
const RegisterPage = () => import('./pages/RegisterPage.vue');
const NotFoundPage = () => import('./pages/NotFoundPage.vue'); // 404 页面

// 引入布局组件
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import AuthLayout from '@/layouts/AuthLayout.vue';
import AboutPage from './pages/AboutPage.vue';
import TestPage from './pages/TestPage.vue';
import ImageCropper from './pages/ImageCropper.vue';
import DialogEditor from './pages/DialogEditor.vue';
import Index from './pages/Index.vue';



// 定义路由
const routes = [
  {
    path: '/',
    component: Index,
    name: 'Index', 
    meta: { layout: AuthLayout },
  },
  {
    path: '/image',
    component: ImageCropper,
    name: 'ImageCropper', // 这里应是字符串形式的路由名称
    meta: { layout: AuthLayout },
  },
  {
    path: '/design',
    component: DialogEditor,
    name: 'DialogEditor', // 这里应是字符串形式的路由名称
    meta: { layout: AuthLayout },
  },
  {
    path: '/about',
    component: AboutPage,
    meta: { layout: DefaultLayout },
      props: true, // 允许传递 URL 参数到组件
  },
  {
    path: '/test',
    component: TestPage,
    meta: { layout: AuthLayout },
  },
  {
    path: '/login',
    component: LoginPage,
    name: 'LoginPage',
    meta: { layout: AuthLayout },
  },
  {
    path: '/register',
    component: RegisterPage,
    name: 'RegisterPage',
    meta: { layout: AuthLayout },
  },
  {
    path: '/:catchAll(.*)', // 捕获所有未匹配的路径
    component: NotFoundPage, // 显示404页面
    meta: { layout: AuthLayout }, // 默认布局
  },
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
